<template>
    <div class="md-register-form">
        <v-text-field label="Username" v-model="data.name" :error-messages="errors.name"/>
        <v-text-field label="Email" v-model="data.email" :error-messages="errors.email" type="email"/>
        <v-text-field label="Password" v-model="data.password" :error-messages="errors.password" type="password"/>
        <v-text-field label="Password Confirmation" v-model="data.password_confirmation" :error-messages="errors.password_confirmation" type="password"/>
        <v-checkbox v-model="data.accepted" :error-messages="errors.accepted">
            <span slot="label">Accepted</span>
            <span slot="append">
                <a class="md-protocol">Protocol</a>
            </span>
        </v-checkbox>
    </div>
</template>

<script>
    import vModeObject from "@/components/mixins/vModeObject";

    export default {
        name: "RegisterForm",
        mixins: [vModeObject],
        data () {
            return {
                rules: {
                    name: 'required|string|min:2|max:32',
                    email: 'required|string|email|max:64',
                    password: 'required|string|min:6|confirmed',
                    password_confirmation: 'required|string|min:6',
                    accepted: 'required|boolean|accepted'
                }
            }
        }
    }
</script>

<style scoped>
    .md-protocol {
        display: block;
        padding-top: 4px;
    }
</style>